<template>
  <div class="part part-1">
    <h1>具名插槽</h1>
    <p></p>
    <pre>
      <code>

      </code>
    </pre>
    <slot1 @change="changeUserInfo" :user="userInfo">
      <template v-slot:slot1="userInfo">slot1内容</template>
      <template #slot2>slot2内容</template>
      <template #slot3="userInfo">{{userInfo.user2.sex}}</template>
    </slot1>
  </div>
</template>

<script>
  import slot1 from './slot1.vue';
  export default {
    name: "slotDemo",
    components: {
      slot1
    },
    data() {
      return {
        userInfo: {
          name: 'cc',
          sex: '男2'
        },
        userInfo2: {
          name: 'zz',
          sex: '女'
        }
      }
    },
    methods: {
      changeUserInfo(val) {
        this.userInfo = val;
      }
    }
  }
</script>

<style scoped>

</style>
